<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单全屏层</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../lib/layui/css/layui.css">

	</head>

	<body>
		 
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">示例</li>
    <li>说明</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
    	
    	
    	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>表单全屏层</legend>
		</fieldset>

		

		<div class="demoTable">
			<div class="layui-btn-group">
				<button id="addBtn"  class="layui-btn">增加</button>
				<button id="updateBtn" class="layui-btn ">编辑</button>
				<button id="cBtn" class="layui-btn">自定义弹窗</button>
			</div>
			搜索ID：
			<div class="layui-inline">
				<input class="layui-input" name="id" id="demoReload2" autocomplete="off">
			</div>
			<button class="layui-btn" data-type="reload">搜索</button>
		</div>

		<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
	
    	
    	
    	
    	
    </div>
    <div class="layui-tab-item">
    	
    	<blockquote class="layui-elem-quote layui-text">
			hpFormAll.open(elm,url,title)<br/>
			注意：<br/>
			elm 为绑定的元素 如 #addBtn<br/>
			url 为访问的接口地址 如 xxx<br/>
			title为绑定的元素 如显示的弹窗的标题<br/>
		</blockquote>
    	
    </div>
  </div>
</div> 
		
			<script src="../lib/layui/layui.js"></script>

		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			// 配置
			layui.config({
				base: '../hpModules/' // 扩展模块目录
			}).extend({ // 模块别名
				hpTab: 'hpComponent/hpTab',
				hpRightMenu: 'hpComponent/hpRightMenu',
				hpFormAll: 'hpComponent/hpFormAll',
				hpConfig : 'hpComponent/hpConfig',
			});
			layui.use(['table', 'hpFormAll'], function() {
				var table = layui.table;
				var hpFormAll = layui.hpFormAll;
				//console.log(layui)
				// add
				hpFormAll.open("#addBtn","../demo/button.html",'增加');
                // update
                hpFormAll.open("#updateBtn","../demo/form.html",'编辑');
                hpFormAll.openOpt("#cBtn","../demo/button.html",{
                	title:'自定义弹窗',
                	area:['800px', '500px'],
                	btn: ['确认', '取消'],
                	yes:function(index, layero) {
                		layer.msg('确认 按钮 被点击');
                		layer.close(index);
                	},
                	btn2:function(index, layero) {
                		layer.msg('取消 按钮 被点击')
                		layer.close(index);
                    },
                	cancel: function(index, layero){ 
                		layer.msg('x 按钮 被点击')
                	}
                	
                });
				//方法级渲染
				table.render({
					elem: '#LAY_table_user',
					url: 'json/demo3.json',
					cols: [
						[
							{ checkbox: true, fixed: true }, { field: 'id', title: 'ID', width: 80, sort: true, fixed: true }, { field: 'username', title: '用户名', width: 80 }, { field: 'sex', title: '性别', width: 80, sort: true }, { field: 'city', title: '城市', width: 80 }, { field: 'sign', title: '签名' }, { field: 'experience', title: '积分', sort: true, width: 80 }, { field: 'score', title: '评分', sort: true, width: 80 }, { field: 'classify', title: '职业', width: 80 }, { field: 'wealth', title: '财富', sort: true, width: 135 }
						]
					],
					id: 'testReload',
					page: true,
					height: 315
				});

				var $ = layui.$,
					active = {
						reload: function() {
							var demoReload = $('#demoReload2');
							console.log(demoReload.val())
							//执行重载
							table.reload('testReload', {
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									key: {
										id: demoReload.val()
									}
								}
							});
						}
					};

				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>
		
		
		
	</body>

</html>